<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content goods-detail">
      <div class="banner-contain">
        <a href="javascript:" class="mui-text-center back-btn" @tap="backMall">
          <span class="mui-icon mui-icon-back"></span>
        </a>
        <swiper :options="swiperOption" ref="banerSwiper">
          <!-- slides -->
          <swiper-slide v-for="(item, index) in banners" :key='"banner"+index'>
            <img :src="item" alt="">
          </swiper-slide>
        </swiper>
      </div>
      <div class="detail-info">
        <p><span class="text-sm">￥</span><span class="price">{{info.price}}</span></p>
        <h4 class="goods-name">{{info.name}}</h4>
        <p class="goods-sub-info">
          <span v-if='info.is_baoyou==0'>邮费：￥0</span>
          <span class="sale-num">月销{{info.sale_volume}}笔</span>
        </p>
      </div>

      <div class="goods-standard">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell" @tap="sizePanelShow = true">
            <a class="mui-navigate-right">规格
              <!-- <span>11支/束</span>
              <span>2束</span> -->
              <span>{{info.specifications}}</span>
            </a>
          </li>
          <li class="mui-table-view-cell">服务 <span>优质 正品</span></li>
        </ul>
      </div>

      <div class="detail-art">
        <h4 class="mui-text-center">商品详情</h4>
        <div class="detail-pic">

        </div>
      </div>

      <!--规格-->
      <div class="select-size mui-backdrop" v-show="sizePanelShow">
        <transition name="draw">
          <div class="select-inner"  v-show="sizePanelShow">
            <div class="select-top mh-pd">
              <span class="mui-icon mui-icon-closeempty ic-close" @tap="sizePanelShow = false"></span>
              <div class="g-info flex">
                <div class="pic-box">
                  <img :src="info.image" alt="">
                </div>
                <div class="g-info-right">
                  <p class="goods-name">{{info.name}} </p>
                  <p v-if='info.is_baoyou==1'>包邮 </p>
                  <p class="price">￥{{info.price}} </p>
                </div>
              </div>

              <div class="size-item">
                <h4 class="size-item-name">规格</h4>
                <div class="size-item-con">
                  <span :class='curIndex==0 ? "active" : ""' v-for='(item, index) in sizeArr' @click='getSize(index)'>{{item}}</span>
                </div>
              </div>

              <div class="flex-bt size-item">
                <h4 class="size-item-name">数量</h4>
                <mh-numbox> </mh-numbox>
              </div>
            </div>

            <div class="select-foot mui-text-right">
              <span>金额: </span>
              <span class="price">￥{{totalPrice}}</span>
              <button type="button" class="mui-btn mh-btn" @tap="orderConfirm">确定</button>
            </div>
          </div>
        </transition>
      </div>

    </section>
  </transition>
</template>

<script>
  import MhNumbox from '@/components/mh-numbox/mh-numbox'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper';
  import {MH_API} from "@/api/api";
  export default {
    name: "goods-detail",
    data () {
      return {
        swiperOption: {
          loop: true,
          centeredSlides: true
        },
        banners: [
          // {
          //   id: '1',
          //   imgSrc: 'https://yanxuan.nosdn.127.net/4e4806eb489e3dc09c46fcb847696e1c.jpg?imageView&quality=95&thumbnail=1090x310'
          // },
          // {
          //   id: '2',
          //   imgSrc: 'https://yanxuan.nosdn.127.net/56f76169f37f0911ead70e7690e5ad0b.jpg?imageView&quality=95&thumbnail=1090x310'
          // }
        ],
        sizePanelShow: false,
        sizeImg: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3316084142,727466806&fm=200&gp=0.jpg',
        info: {},
        sizeArr: [],
        size: 1,
        curIndex: 0,
        number: 1,
        price: 0,
        totalPrice: 0
      }
    },
    created () {
      let id = this.$route.params.id;
      let self = this;
      self.id = id;
      MH_API.getGoods({
        id: id
      }).then(res => {
        if (res.status === 200) {
          self.info = res.data[0];
          self.banners.push(res.data[0].image);
          self.sizeArr.push(res.data[0].specifications);
          self.price = res.data[0].price;
          self.totalPrice = res.data[0].price;
        }
      })
      this.$nextTick(function() {
        mui('#numBox').numbox()
      });
    },
    methods: {
      getNum(num){
        let totalPrice = this.price * num;
        this.totalPrice = totalPrice.toFixed(2);
        this.number = num;
      },
      getSize(index){
        this.curIndex = index;
        this.size = index;
      },
      backMall () {
        this.$router.go(-1);
      },
      orderConfirm () {
        let self = this;
        this.$router.push({
          path: '/order/confirm',
          query: {
            id: self.id,
            size: self.size,
            number: self.number
          }
        })
      }
    },
    components: {
      MhNumbox,
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  .banner-contain {
    position: relative;
    width: 100%;
    height: 23.2rem;
    .swiper-container {
      height: 100%;
    }
  }
  .detail-info {
    padding: 1rem;
    background-color: #fff;
    .text-sm {font-size: 1.2rem;color: #f26c60;}
    .price {font-size: 1.8rem;}
    .sale-num {margin-left: 2rem;}
  }
  .goods-name {margin: .4rem 0;font-size: 1.4rem;color: #333;}
  .back-btn {
    position: absolute;
    padding: .2rem;
    background: linear-gradient(180deg, #dd65a1 30%, #fa625a 100%);
    color: #fff;
    border-radius: 100%;
    left: 1rem;
    top: 1rem;
    z-index: 2;
  }
  .goods-standard {margin: 1rem 0;}
  .mui-table-view-cell {
    font-size: 1.2rem;
    color: #999;
    span {
      color: #333;
      &:first-child {margin-left: 2rem;}
    }
  }
  .mui-table-view-cell:after, .mui-table-view:after, .mui-table-view:before {height: 0;}
  .detail-art {
    background-color: #fff;
    h4 {
      padding: 1rem 0;
    }
  }
  .select-inner {
    position: absolute;
    background-color: #fff;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .select-top {
    position: relative;
    .ic-close {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 4.5rem;
      color: #999;
    }
  }
  .pic-box {
    width: 7.5rem;
    height: 7.5rem;
    overflow: hidden;
    img {width: 100%;}
  }
  .g-info-right {
    padding-left: 1rem;
    flex: 1;
    .price {margin-top: .4rem;}
  }
  .select-foot {
    display: flex;
    margin-top: 2.5rem;
    align-items: center;
    justify-content: flex-end;
    height: 4.8rem;
    line-height: 4.8rem;
    background-color: #fff;
    border-top: 1px solid #eee;
    .mh-btn {
      line-height: 4.8rem;
      margin-left: 1rem;
      padding: 0 3.4rem;
      border-radius: 0;
      font-size: 1.7rem;
    }
  }
  .size-item {
    margin-top: 1rem;
    .size-item-name {
      margin-bottom: 1rem;
      font-size: 1.2rem;
    }
  }
  .size-item-con {
    span {
      display: inline-block;
      min-width: 5.5rem;
      padding: .1rem .8rem;
      font-size: 1.2rem;
      color: #fff;
      background-color: #eee;
      border-radius: 1rem;
      text-align: center;
      &.active {background-color: #e685aa;}
    }
  }
</style>
